﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hui 2.x</title>
    <meta charset="utf-8" />
    <meta name="author" content="百签软件（中山）有限公司，百小僧" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link type="text/css" href="../../../css/hui.css" rel="stylesheet" />
    <style type="text/css"></style>
</head>
<body class="hui-body">
    <div class="hui-func hui-flexbox-row hui-padding-all-5 hui-background-color-white">
        <div class="hui-func-item hui-flexbox-item hui-text-align-center hui-touch-active hui-position-relative">
            <span class="hui-badge hui-display-inline-block hui-line-height-0 hui-position-absolute hui-offset-right-10">
                <label class="hui-badge-content hui-background-color-black hui-display-inline-block hui-height-18 hui-line-height-18 hui-padding-col-6 hui-border-radius-9 hui-font-color-white hui-font-size-12">
                    2
                </label>
            </span>
            <span class="hui-icon hui-display-block hui-margin-col-auto hui-width-height-45 hui-background-color-turquoise hui-center-all hui-circle">
                <i class="hui-iconfont hui-icon-qq hui-font-color-white hui-font-size-24"></i>
            </span>
            <label class="hui-font-size-12">腾讯好友</label>
        </div>
        <div class="hui-func-item hui-flexbox-item hui-text-align-center hui-touch-active hui-position-relative">
            <span class="hui-badge hui-display-inline-block hui-line-height-0 hui-position-absolute hui-offset-right-10">
                <label class="hui-badge-content hui-background-color-emerald hui-display-inline-block hui-width-height-8 hui-circle"></label>
            </span>
            <span class="hui-icon hui-display-block hui-margin-col-auto hui-width-height-45 hui-background-color-emerald hui-center-all hui-circle">
                <i class="hui-iconfont hui-icon-weixin hui-font-color-white hui-font-size-24"></i>
            </span>
            <label class="hui-font-size-12">微信好友</label>
        </div>
        <div class="hui-func-item hui-flexbox-item hui-text-align-center hui-touch-active">
            <span class="hui-icon hui-display-block hui-margin-col-auto hui-width-height-45 hui-background-color-alizarin hui-center-all hui-circle">
                <i class="hui-iconfont hui-icon-friends hui-font-color-white hui-font-size-24"></i>
            </span>
            <label class="hui-font-size-12">朋友圈</label>
        </div>
        <div class="hui-func-item hui-flexbox-item hui-text-align-center hui-touch-active">
            <span class="hui-icon hui-display-block hui-margin-col-auto hui-width-height-45 hui-background-color-wetAsphalt hui-center-all hui-circle">
                <i class="hui-iconfont hui-icon-weibo hui-font-color-white hui-font-size-24"></i>
            </span>
            <label class="hui-font-size-12">新浪微博</label>
        </div>
    </div>
    <!--======分割线======-->
    <div class="hui-height-5 hui-clear-both"></div>
    <!--======分割线======-->
    <div class="hui-func hui-flexbox-row hui-padding-all-5 hui-background-color-white">
        <div class="hui-func-item hui-flexbox-item hui-text-align-center hui-touch-active">
            <span class="hui-icon hui-display-block hui-margin-col-auto hui-width-height-45 hui-background-color-turquoise hui-center-all hui-border-radius-8">
                <i class="hui-iconfont hui-icon-qq hui-font-color-white hui-font-size-24"></i>
            </span>
            <label class="hui-font-size-12">腾讯好友</label>
        </div>
        <div class="hui-func-item hui-flexbox-item hui-text-align-center hui-touch-active">
            <span class="hui-icon hui-display-block hui-margin-col-auto hui-width-height-45 hui-background-color-emerald hui-center-all  hui-border-radius-8">
                <i class="hui-iconfont hui-icon-weixin hui-font-color-white hui-font-size-24"></i>
            </span>
            <label class="hui-font-size-12">微信好友</label>
        </div>
        <div class="hui-func-item hui-flexbox-item hui-text-align-center hui-touch-active">
            <span class="hui-icon hui-display-block hui-margin-col-auto hui-width-height-45 hui-background-color-alizarin hui-center-all  hui-border-radius-8">
                <i class="hui-iconfont hui-icon-friends hui-font-color-white hui-font-size-24"></i>
            </span>
            <label class="hui-font-size-12">朋友圈</label>
        </div>
        <div class="hui-func-item hui-flexbox-item hui-text-align-center hui-touch-active">
            <span class="hui-icon hui-display-block hui-margin-col-auto hui-width-height-45 hui-background-color-wetAsphalt hui-center-all  hui-border-radius-8">
                <i class="hui-iconfont hui-icon-weibo hui-font-color-white hui-font-size-24"></i>
            </span>
            <label class="hui-font-size-12">新浪微博</label>
        </div>
    </div>
    <!--======分割线======-->
    <div class="hui-height-5 hui-clear-both"></div>
    <!--======分割线======-->
    <div class="hui-func hui-flexbox-row hui-padding-all-5 hui-background-color-white">
        <div class="hui-func-item hui-flexbox-item hui-text-align-center hui-touch-active">
            <span class="hui-icon hui-display-block hui-margin-col-auto hui-width-height-45 hui-background-color-turquoise hui-center-all hui-border-radius-8">
                <i class="hui-iconfont hui-icon-qq hui-font-color-white hui-font-size-24"></i>
            </span>
            <label class="hui-font-size-12">腾讯好友</label>
        </div>
        <div class="hui-func-item hui-flexbox-item hui-text-align-center hui-touch-active">
            <span class="hui-icon hui-display-block hui-margin-col-auto hui-width-height-45 hui-background-color-emerald hui-center-all  hui-border-radius-8">
                <i class="hui-iconfont hui-icon-weixin hui-font-color-white hui-font-size-24"></i>
            </span>
            <label class="hui-font-size-12">微信好友</label>
        </div>
        <div class="hui-func-item hui-flexbox-item hui-text-align-center hui-touch-active">
            <span class="hui-icon hui-display-block hui-margin-col-auto hui-width-height-45 hui-background-color-alizarin hui-center-all  hui-border-radius-8">
                <i class="hui-iconfont hui-icon-friends hui-font-color-white hui-font-size-24"></i>
            </span>
            <label class="hui-font-size-12">朋友圈</label>
        </div>
        <div class="hui-func-item hui-flexbox-item hui-text-align-center hui-touch-active">
            <span class="hui-icon hui-display-block hui-margin-col-auto hui-width-height-45 hui-background-color-wetAsphalt hui-center-all  hui-border-radius-8">
                <i class="hui-iconfont hui-icon-weibo hui-font-color-white hui-font-size-24"></i>
            </span>
            <label class="hui-font-size-12">新浪微博</label>
        </div>
        <div class="hui-func-item hui-flexbox-item hui-text-align-center hui-touch-active">
            <span class="hui-icon hui-display-block hui-margin-col-auto hui-width-height-45 hui-background-color-red hui-center-all  hui-border-radius-8">
                <i class="hui-iconfont hui-icon-qzone hui-font-color-white hui-font-size-24"></i>
            </span>
            <label class="hui-font-size-12">QQ空间</label>
        </div>
    </div>
    <!--======分割线======-->
    <div class="hui-height-5 hui-clear-both"></div>
    <!--======分割线======-->
    <div class="">
        <div class="hui-func hui-flexbox-row hui-padding-all-5 hui-background-color-white">
            <div class="hui-func-item hui-flexbox-item hui-text-align-center hui-touch-active">
                <span class="hui-icon hui-display-block hui-margin-col-auto hui-width-height-45 hui-background-color-turquoise hui-center-all hui-circle">
                    <i class="hui-iconfont hui-icon-qq hui-font-color-white hui-font-size-24"></i>
                </span>
                <label class="hui-font-size-12">腾讯好友</label>
            </div>
            <div class="hui-func-item hui-flexbox-item hui-text-align-center hui-touch-active">
                <span class="hui-icon hui-display-block hui-margin-col-auto hui-width-height-45 hui-background-color-emerald hui-center-all hui-circle">
                    <i class="hui-iconfont hui-icon-weixin hui-font-color-white hui-font-size-24"></i>
                </span>
                <label class="hui-font-size-12">微信好友</label>
            </div>
            <div class="hui-func-item hui-flexbox-item hui-text-align-center hui-touch-active">
                <span class="hui-icon hui-display-block hui-margin-col-auto hui-width-height-45 hui-background-color-alizarin hui-center-all hui-circle">
                    <i class="hui-iconfont hui-icon-friends hui-font-color-white hui-font-size-24"></i>
                </span>
                <label class="hui-font-size-12">朋友圈</label>
            </div>
            <div class="hui-func-item hui-flexbox-item hui-text-align-center hui-touch-active">
                <span class="hui-icon hui-display-block hui-margin-col-auto hui-width-height-45 hui-background-color-wetAsphalt hui-center-all hui-circle">
                    <i class="hui-iconfont hui-icon-weibo hui-font-color-white hui-font-size-24"></i>
                </span>
                <label class="hui-font-size-12">新浪微博</label>
            </div>
        </div>
        <div class="hui-func hui-flexbox-row hui-padding-all-5 hui-background-color-white">
            <div class="hui-func-item hui-flexbox-item hui-text-align-center hui-touch-active">
                <span class="hui-icon hui-display-block hui-margin-col-auto hui-width-height-45 hui-background-color-turquoise hui-center-all hui-circle">
                    <i class="hui-iconfont hui-icon-qq hui-font-color-white hui-font-size-24"></i>
                </span>
                <label class="hui-font-size-12">腾讯好友</label>
            </div>
            <div class="hui-func-item hui-flexbox-item hui-text-align-center hui-touch-active">
                <span class="hui-icon hui-display-block hui-margin-col-auto hui-width-height-45 hui-background-color-emerald hui-center-all hui-circle">
                    <i class="hui-iconfont hui-icon-weixin hui-font-color-white hui-font-size-24"></i>
                </span>
                <label class="hui-font-size-12">微信好友</label>
            </div>
            <div class="hui-func-item hui-flexbox-item hui-text-align-center hui-touch-active">
                <span class="hui-icon hui-display-block hui-margin-col-auto hui-width-height-45 hui-background-color-alizarin hui-center-all hui-circle">
                    <i class="hui-iconfont hui-icon-friends hui-font-color-white hui-font-size-24"></i>
                </span>
                <label class="hui-font-size-12">朋友圈</label>
            </div>
            <div class="hui-func-item hui-flexbox-item hui-text-align-center hui-touch-active">
                <span class="hui-icon hui-display-block hui-margin-col-auto hui-width-height-45 hui-background-color-wetAsphalt hui-center-all hui-circle">
                    <i class="hui-iconfont hui-icon-weibo hui-font-color-white hui-font-size-24"></i>
                </span>
                <label class="hui-font-size-12">新浪微博</label>
            </div>
        </div>
    </div>
    <!--======分割线======-->
    <div class="hui-height-5 hui-clear-both"></div>
    <!--======分割线======-->
    <!--不用流布局解决宫格问题-->
    <div class="hui-func hui-display-table hui-background-color-white hui-width-full hui-padding-row-5">
        <div class="hui-func-item hui-display-table-cell hui-width-col-4 hui-float-left hui-text-align-center">
            <span class="hui-icon hui-display-block hui-margin-col-auto hui-width-height-45 hui-background-color-turquoise hui-center-all hui-circle">
                <i class="hui-iconfont hui-icon-qq hui-font-color-white hui-font-size-24"></i>
            </span>
            <label class="hui-font-size-12">腾讯好友</label>
        </div>
        <div class="hui-func-item hui-display-table-cell hui-width-col-4 hui-float-left hui-text-align-center">
            <span class="hui-icon hui-display-block hui-margin-col-auto hui-width-height-45 hui-background-color-turquoise hui-center-all hui-circle">
                <i class="hui-iconfont hui-icon-qq hui-font-color-white hui-font-size-24"></i>
            </span>
            <label class="hui-font-size-12">腾讯好友</label>
        </div>
        <div class="hui-func-item hui-display-table-cell hui-width-col-4 hui-float-left hui-text-align-center">
            <span class="hui-icon hui-display-block hui-margin-col-auto hui-width-height-45 hui-background-color-turquoise hui-center-all hui-circle">
                <i class="hui-iconfont hui-icon-qq hui-font-color-white hui-font-size-24"></i>
            </span>
            <label class="hui-font-size-12">腾讯好友</label>
        </div>
        <div class="hui-func-item hui-display-table-cell hui-width-col-4 hui-float-left hui-text-align-center">
            <span class="hui-icon hui-display-block hui-margin-col-auto hui-width-height-45 hui-background-color-turquoise hui-center-all hui-circle">
                <i class="hui-iconfont hui-icon-qq hui-font-color-white hui-font-size-24"></i>
            </span>
            <label class="hui-font-size-12">腾讯好友</label>
        </div>
        <div class="hui-func-item hui-display-table-cell hui-width-col-4 hui-float-left hui-text-align-center">
            <span class="hui-icon hui-display-block hui-margin-col-auto hui-width-height-45 hui-background-color-turquoise hui-center-all hui-circle">
                <i class="hui-iconfont hui-icon-qq hui-font-color-white hui-font-size-24"></i>
            </span>
            <label class="hui-font-size-12">腾讯好友</label>
        </div>
        <div class="hui-func-item hui-display-table-cell hui-width-col-4 hui-float-left hui-text-align-center">
            <span class="hui-icon hui-display-block hui-margin-col-auto hui-width-height-45 hui-background-color-turquoise hui-center-all hui-circle">
                <i class="hui-iconfont hui-icon-qq hui-font-color-white hui-font-size-24"></i>
            </span>
            <label class="hui-font-size-12">腾讯好友</label>
        </div>
    </div>
    <script type="text/javascript" src="../../../script/hui.js"></script>
    <script type="text/javascript">
    </script>
</body>
</html>
